<!-- 资源库 -->
<template>
  <div class="row mb-10">
    <div class="container">
      <div class="col-12" v-if="id != -1 && id != -2">

        <section class="content-section">
          <h1 class="section-header">{{id?'库':'世界'}}
            <div class="breadcrumb">
              / {{pathName}}
            </div>
            <!-- 搜索功能 -->
            <!-- <el-button style="float:right;" class="ml-10" icon="el-icon-search" circle :loading="isSearch"
              @click="search()"></el-button>

            <el-autocomplete style="float:right;" v-model="state" :fetch-suggestions="querySearchAsync"
              placeholder="搜点什么" @select="handleSelect">
            </el-autocomplete> -->
          </h1>




          <div class="access-links">

            <div class="access-link-wrapper" @click="select(0)">
              <div class="access-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-image">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                  <circle cx="8.5" cy="8.5" r="1.5"></circle>
                  <polyline points="21 15 16 10 5 21"></polyline>
                </svg>
              </div>
              <span class="access-text">图片</span>
            </div>


            <div class="access-link-wrapper" @click="select(1)">
              <div class="access-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-music">
                  <path d="M9 18V5l12-2v13"></path>
                  <circle cx="6" cy="18" r="3"></circle>
                  <circle cx="18" cy="16" r="3"></circle>
                </svg>
              </div>
              <span class="access-text">音乐</span>
            </div>


            <div class="access-link-wrapper" @click="select(2)">
              <div class="access-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="currentColor"
                  stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-play">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <span class="access-text">短视频</span>
            </div>


            <div class="access-link-wrapper" @click="select(3)">
              <div class="access-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-align-left">
                  <line x1="17" y1="10" x2="3" y2="10"></line>
                  <line x1="21" y1="6" x2="3" y2="6"></line>
                  <line x1="21" y1="14" x2="3" y2="14"></line>
                  <line x1="17" y1="18" x2="3" y2="18"></line>
                </svg>
              </div>
              <span class="access-text">文档</span>
            </div>


            <div class="access-link-wrapper" @click="select(4)">
              <div class="access-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                  class="feather feather-layers">
                  <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                  <polyline points="2 17 12 22 22 17"></polyline>
                  <polyline points="2 12 12 17 22 12"></polyline>
                </svg>
              </div>
              <span class="access-text">其他</span>
            </div>

          </div>
        </section>
        <div class="widget-header-1 position-relative mb-30">
          <h5 class="mt-5 mb-30"></h5>
        </div>
      </div>

      <div v-if="current == 0  && id!= -1 && id!= -2" class="col-12" style="overflow: scroll; height:310px;">
        <div class="row">
          <div class="col-12">
            <el-row>
              <el-col :span="4" v-for="(pic,i) in pics" :key="i">
                <el-card shadow="hover" class="mt-10 ml-10">
                  <el-image :src="pic.path" style="height:100px;" :preview-src-list="getImgList(i)">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </el-card>
              </el-col>
            </el-row>

          </div>
          <!-- <div class="col-6">
            <cards name="music" :comments="music.comments" class="pr-100"></cards>
          </div> -->
        </div>
      </div>

      <div v-if="current == 1  && id!= -1 && id!= -2" class="col-12 mt-100 mb-60">
        <div class="row">
          <div class="col-12">
            <music :music="musics"></music>
          </div>
          <!-- <div class="col-6">
            <cards name="music" :comments="music.comments" class="pr-100"></cards>
          </div> -->
        </div>
      </div>

      <div v-if="current == 2" class="col-12" style="margin-top:300px; margin-bottom:280px;">
        <div class="row">
          <div class="col-12">
            <vedio :vedio="vedios"></vedio>
          </div>
          <!-- <div class="col-6">
            <cards name="vedio" :comments="vedio.comments" class="ml-10"></cards>
          </div> -->
        </div>
      </div>

      <div v-if="current == 3  && id!= -1 && id!= -2" class="col-12">
        <div class="row">
          <div class="col-12">
            <el-card style="height:400px;">
              <span class="">
                {{documents[docIdx].cname+'.'+documents[docIdx].suffix}}
              </span>
              <el-button-group style="float:right;" class="mb-10">
                <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="docNext(-1)">上一页</el-button>
                <el-button type="primary" size="mini" @click="docNext(1)">下一页<i
                    class="el-icon-arrow-right el-icon--right"></i></el-button>
              </el-button-group>
              <iframe :src="documents[docIdx].path" width="100%" height="330px;"></iframe>
            </el-card>
          </div>
        </div>
      </div>

      <div v-if="current == 4 && id!= -1 && id!= -2" class="col-12">
        <div class="row">
          <div class="col-12">
            <el-card shadow="hover" class="mt-10">
              <el-divider content-position="left">两行·☁</el-divider>
              <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
              <el-divider></el-divider>
              <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
              <!-- <el-divider></el-divider>
            <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span> -->
            </el-card>
          </div>
        </div>
      </div>


      <div class="col-12 mb-10">

        <el-dialog title="预览" :visible.sync="preview">
          <div class="row">
            <div class="col-12" style="margin:0 auto;">
              <span>
                {{(currentType == 'PDF'|| currentType == 'DOCUMENT'||currentType == 'PIC'||currentType == 'VIDEO'|| currentType == 'MUSIC')?currentName:'文件暂时不支持预览'}}
              </span>
              <el-tooltip content="复制文件链接，可用于写文章的引用" placement="top" effect="light">
                <el-link :disabled="currentType == 'FOLDER'|| currentType=='UPLOAD'" icon="el-icon-link"
                  class="tag-read" :data-clipboard-text="window.g.downloadUrl+currentPath" @click="copy">&nbsp;</el-link>
              </el-tooltip>
            </div>
            <div class="col-12">

              <img class="border-radius-10" width="50%" :src="currentFile" v-if="currentType == 'PIC'" />
              <vue-core-video-player style="height:400px;" :autoplay="false" :src="currentFile"
                v-if="currentType == 'VIDEO'">
              </vue-core-video-player>
              <iframe :src="currentFile" v-if="currentType == 'MUSIC'" width="730px;"> </iframe>
              <iframe :src="currentFile" v-if="currentType == 'PDF'||currentType == 'DOCUMENT'" height="400px"
                width="730px;"></iframe>
            </div>
          </div>
        </el-dialog>

        <div class="row" v-if="id != -1">
          <div class="col-12">
            <h1 class="section-header">{{id?'库':'随心云·☁'}}

            </h1>
            <div class="widget-header-1 position-relative mb-30">
              <h5 class="mt-5 mb-30"></h5>
            </div>
          </div>
        </div>
        <el-row>


          <el-col :span="24">
            <el-card class="box-card bg-grey" style="border-radius: 25px;" :body-style="{ padding: '0px' }">
              <div slot="header" class="clearfix" style="height:10px;">
                <!-- 当前路径 -->
                <div class="ml-10 mb-10">
                  <el-breadcrumb separator="/">

                    <el-dialog :title="'在'+currentPath+'目录新建文件夹'" :visible.sync="dialogVisible" width="30%">
                      <!-- <span>文件名</span> -->
                      <el-input v-model="newFileName" placeholder="文件夹名"></el-input>
                      <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addFile()">确 定</el-button>
                      </span>
                    </el-dialog>


                    <span class="el-breadcrumb__item mr-5">
                      <span role="link" class="el-breadcrumb__inner mr-10">
                        <el-tooltip :content="isList?'切换卡片模式':'切换列表模式'" placement="top" effect="light">
                          <el-link :icon="!isList?'el-icon-notebook-2':'el-icon-s-grid'" @click="isList = !isList">
                          </el-link>
                        </el-tooltip>
                      </span>
                    </span>

                    <span class="el-breadcrumb__item mr-5">
                      <span role="link" class="el-breadcrumb__inner mr-10">
                        <el-tooltip :content="hasSearch?'打开检索':'关闭检索'" placement="top" effect="light">
                          <el-link :icon="hasSearch?'el-icon-search':'el-icon-circle-close'" @click="colseSearch">
                          </el-link>
                        </el-tooltip>
                      </span>
                    </span>

                    <span class="el-breadcrumb__item mr-5" v-if="!hasSearch">
                      <span role="link" class="el-breadcrumb__inner">
                        <input class="pl-5" v-model="state" style="border-radius: 25px; font-size:10px;" />
                      </span>
                    </span>

                    <span class="el-breadcrumb__item">
                      <span role="link" class="el-breadcrumb__inner">
                        {{files.files.length}}
                      </span>
                    </span>

                    <span class="el-breadcrumb__item" v-if="local">
                      <span role="link" class="el-breadcrumb__inner">
                        <el-tooltip content="在当前目录上传文件" placement="top" effect="light">
                          <el-upload class="upload-demo" :limit="20" :on-exceed="masterFileMax" :show-file-list="false"
                            :before-upload="onBeforeUpload" action="#" ref="upup" :on-error="uploadFileError"
                            :on-success="uploadFileSuccess" :http-request="handleRequest" multiple>
                            &nbsp;<i class="el-icon-upload">&nbsp;</i>
                          </el-upload>
                        </el-tooltip>
                      </span>
                    </span>
                    <span class="el-breadcrumb__item" v-if="local">
                      <span role="link" class="el-breadcrumb__inner">
                        <el-tooltip content="在当前目录新建文件夹" placement="top" effect="light">
                          <a @click="dialogVisible = true">
                            <i class="el-icon-folder-add">&nbsp;</i>
                          </a>
                        </el-tooltip>
                      </span>
                    </span>
                    <span class="el-breadcrumb__item ml-5">
                      <span role="link" class="el-breadcrumb__inner">
                        <el-tooltip content="刷新当前目录" placement="top" effect="light">
                          <a @click="reFlash">
                            <i class="el-icon-refresh">&nbsp;</i>
                          </a>
                        </el-tooltip>
                      </span>
                    </span>
                    <el-breadcrumb-item v-for="(item,i) in path" :key="i">
                      <el-tooltip content="前往根目录" placement="top" effect="light" v-if="i==0&&currentPathIndex>0">
                        <a @click="toUrl(i)">
                          {{item=='/'?'📂':item}}
                        </a>
                      </el-tooltip>
                      <a @click="toUrl(i)" v-if="i>0&&i<path.length-1&&currentPathIndex>0">
                        <span v-if="!local && i == 1">{{getName(item)}}</span>
                        <span v-if="local || i != 1">
                          {{item}}
                        </span>
                      </a>
                      <span v-if="i==path.length-1&&currentPathIndex>0">
                        <span v-if="!local && i == 1">{{getName(item)}}</span>
                        <span v-if="local || i != 1">
                          {{item}}
                        </span>
                      </span>
                    </el-breadcrumb-item>


                    <!-- <span class="el-breadcrumb__item" style="float:right;"> -->
                    <span role="link" class="el-breadcrumb__inner mr-10" style="float:right;">
                      <el-tooltip :content="local?'前往世界':'返回我的云'" placement="top" effect="light">
                        <el-link :icon="local?'el-icon-cloudy':'el-icon-s-home'" @click="toWorld">
                        </el-link>
                      </el-tooltip>
                    </span>
                    <!-- </span> -->
                  </el-breadcrumb>
                </div>
              </div>

              <el-row v-if="!isList" :gutter="20" class="pl-20 pr-20 pt-20 container" style="overflow: scroll; height:500px;"
                v-loading="fileOp">
                <el-col :span="4" v-for="(item, index) in tableDataNew" :key="index">
                  <el-card :body-style="{ padding: '10px' }" style="border-radius: 25px;" class="mb-20" shadow="hover">
                    <div>
                      <img @click="into(item)" style="border-radius: 20px; margin:0 auto;" width="150px" height="150px"
                        :src="getImg(item)" class="image">
                      <div class="mt-10 ml-10" style="height:50px; text-overflow:ellipsis;overflow:hidden; width:130px;">
                        <a @click="into(item)" href="javascript:void(0)">
                          <span style="float:left; font-size:10px;" v-if="!local && currentPathIndex == 0">
                            <search-highlight class="search-highlight" ref="search"
                              @current-change="currentChange(item.cname)" highlightStyle="color:red" currentStyle=""
                              @mactch-count-change="matchCountChange" :content="getName(item.cname)" :keyword="state">
                            </search-highlight>
                          </span>
                          <span style="float:left;" v-if="local || currentPathIndex > 0">
                            <search-highlight class="search-highlight" ref="search"
                              @current-change="currentChange(item.cname)" highlightStyle="color:red" currentStyle=""
                              @mactch-count-change="matchCountChange"
                              :content="item.type=='FOLDER'||item.type=='UPLOAD'?item.cname:item.cname+'.'+item.suffix"
                              :keyword="state">
                            </search-highlight>
                          </span>
                        </a>
                        <el-progress :status="item.status" :percentage="item.p" v-if="item.type=='UPLOAD'">
                        </el-progress>
                      </div>

                    </div>
                    <el-row>
                      <el-col :span="24">
                        <span class="text-muted ml-10" style="font-size:5px;">{{item.size}}</span>
                      </el-col>
                      <el-col :span="16" style="float:right;">
                        <el-tooltip :content="!isShare(item)?'共享此项':'取消共享'" placement="top" effect="light">
                          <el-link :disabled="item.type=='UPLOAD'"
                            :icon="!isShare(item)?'el-icon-cloudy':'el-icon-s-home'" @click="share(item)" v-if="local">
                          </el-link>
                        </el-tooltip>
                        <el-link :disabled="item.type == 'FOLDER'|| item.type=='UPLOAD'" icon="el-icon-download"
                          :href="window.g.downloadUrl+item.path+downloadSuffix" :download="item.name+'.'+item.suffix"></el-link>
                          <el-tooltip v-if="id==-1" content="添加至当前写作" placement="top" effect="light">
                          <el-link :disabled="item.type == 'FOLDER'|| item.type=='UPLOAD'" icon="el-icon-document-add"
                            class="tag-read" :data-clipboard-text="window.g.downloadUrl+item.path" @click="sendUrl(item)"></el-link>
                        </el-tooltip>
                        <el-tooltip content="复制文件链接，可用于写文章的引用" placement="top" effect="light">
                          <el-link :disabled="item.type == 'FOLDER'|| item.type=='UPLOAD'" icon="el-icon-link"
                            class="tag-read" :data-clipboard-text="window.g.downloadUrl+item.path" @click="copy"></el-link>
                        </el-tooltip>
                        <el-popconfirm :title="item.type=='FOLDER'?'确定要删除吗？（文件夹）':'确定要删除吗？'" v-if="local"
                          @confirm="remove(item)">
                          <el-link :disabled="item.type=='UPLOAD'" icon="el-icon-delete" slot="reference">
                          </el-link>
                        </el-popconfirm>
                      </el-col>
                    </el-row>


                    <!-- <div style="padding: 4px;" >
                      <span style="font-size:8px;">{{$commons.overflowHidForText(item.cname,15)}}</span>
                        <span class="time" style="font-size:8px;">{{ item.size }}</span>
                        <el-button type="text" class="button">操作按钮</el-button>
                    </div> -->
                  </el-card>
                </el-col>
              </el-row>

              <el-table v-if="isList" class="pl-20" :data="tableDataNew" style="width: 100%; border-radius: 25px;"
                max-height="500" v-loading="fileOp" :header-cell-style="{background:'#f7f8f9',color:'#606266'}"
                row-class-name="bg-grey">
                <el-table-column label="文件名" width="500">
                  <template slot-scope="scope">
                    <a @click="into(scope.row)" href="javascript:void(0)">
                      <i style="float:left;" :class="suffix(scope.row.type)+' mt-5'"></i>
                      <span style="float:left;" v-if="!local && currentPathIndex == 0">
                        <search-highlight class="search-highlight" ref="search"
                          @current-change="currentChange(scope.row.cname)" highlightStyle="color:red" currentStyle=""
                          @mactch-count-change="matchCountChange" :content="getName(scope.row.cname)" :keyword="state">
                        </search-highlight>
                      </span>
                      <span style="float:left;" v-if="local || currentPathIndex > 0">
                        <search-highlight class="search-highlight" ref="search"
                          @current-change="currentChange(scope.row.cname)" highlightStyle="color:red" currentStyle=""
                          @mactch-count-change="matchCountChange"
                          :content="scope.row.type=='FOLDER'||scope.row.type=='UPLOAD'?scope.row.cname:scope.row.cname+'.'+scope.row.suffix"
                          :keyword="state">
                        </search-highlight>
                      </span>
                    </a>
                    <el-progress :status="scope.row.status" :percentage="scope.row.p" v-if="scope.row.type=='UPLOAD'">
                    </el-progress>
                  </template>
                </el-table-column>

                <el-table-column label="大小" width="100">
                  <template slot-scope="scope">
                    {{scope.row.type=='FOLDER'?'':scope.row.size}}
                  </template>
                </el-table-column>

                <el-table-column label="标签" :sortable="true" :sort-method="folderFast">
                  <template slot-scope="scope">

                    <p :class="scope.row.type=='FOLDER'?'text-danger':''">{{scope.row.type}}</p>
                  </template>
                </el-table-column>

                <el-table-column prop="lastModify" label="最后更新时间" width="200">
                </el-table-column>

                <el-table-column label="更多">
                  <template slot-scope="scope">
                    <el-row>
                      <el-tooltip :content="!isShare(scope.row)?'共享此项':'取消共享'" placement="top" effect="light">
                        <el-link :disabled="scope.row.type=='UPLOAD'"
                          :icon="!isShare(scope.row)?'el-icon-cloudy':'el-icon-s-home'" @click="share(scope.row)"
                          v-if="local">
                        </el-link>
                      </el-tooltip>
                      <el-link :disabled="scope.row.type == 'FOLDER'|| scope.row.type=='UPLOAD'" icon="el-icon-download"
                        :href="window.g.downloadUrl+scope.row.path+downloadSuffix"
                        :download="scope.row.name+'.'+scope.row.suffix"></el-link>
                      <el-tooltip content="复制文件链接，可用于写文章的引用" placement="top" effect="light">
                        <el-link :disabled="scope.row.type == 'FOLDER'|| scope.row.type=='UPLOAD'" icon="el-icon-link"
                          class="tag-read" :data-clipboard-text="window.g.downloadUrl+scope.row.path" @click="copy"></el-link>
                      </el-tooltip>
                      <el-popconfirm :title="scope.row.type=='FOLDER'?'确定要删除吗？（文件夹）':'确定要删除吗？'" v-if="local"
                        @confirm="remove(scope.row)">
                        <el-link :disabled="scope.row.type=='UPLOAD'" icon="el-icon-delete" slot="reference">
                        </el-link>
                      </el-popconfirm>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import Music from "../module/music.vue";
  import Cards from "../module/cards.vue";
  import Vedio from '../module/vedio.vue'
  import bus from '../../utils/bus';
  import Clipboard from 'clipboard';
  import SearchHighlight from 'vue-search-highlight'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      Music,
      Cards,
      Vedio,
      'search-highlight': SearchHighlight
    },
    props: ['id'],
    data() {
      //这里存放数据
      return {
        
        window:window,
        isList: false,
        state: '',
        local: true,
        hasSearch: true,
        currentIdx: '',
        matchCount: 0,
        currentFile: '',
        currentType: '',
        currentName: '',
        currentPath: '',
        docIdx: 0,
        updateMap: new Map(),
        fileOp: true,
        // downloadUrl: this.window.g.downloadUrl,
        downloadSuffix: '?response-content-type=application/octet-stream',
        // action: this.window.g.baseUrl+'/file/bucket/upload',
        currentPath: '/',
        headers: {
          "KY-TOKEN": this.$store.getters.getToken
        },
        dialogVisible: false,
        newFileName: '新建文件夹',
        path: ['/'],
        currentPathIndex: 0,
        files: {
          files: []
        },
        pics: [],
        musics: {
          name: [],
          title: [],
          urls: []
        },
        nicknames: [],
        vedios: [],
        documents: [],
        others: [],
        types: ['fa fa-music', 'fa fa-video-camera', 'el-icon-document', ''],
        progressPercent: 0,
        preview: false,
        shares: [],
        current: 4,
        fileName: ['图片', '音乐', '短视频', '文档', '其他'],
        pathName: '',
        music: {
          name: ['星河万里', '错位时空'],
          title: ['Rom邢锐 - 星河万里', '艾辰 - 错位时空'],
          urls: [
            'http://dev.kingyin.club:9000/cloud/Rom%E9%82%A2%E9%94%90%20-%20%E6%98%9F%E6%B2%B3%E4%B8%87%E9%87%8C.mp3',
            'http://dev.kingyin.club:9000/cloud/%E8%89%BE%E8%BE%B0%20-%20%E9%94%99%E4%BD%8D%E6%97%B6%E7%A9%BA.mp3'
          ],
          comments: [{
              username: ['猪皮恶霸', '九名可'],
              comment: ['后来发现只要有人陪，我也不知道我爱谁.', '那个夏天，爱意随风起，风止意难平.'],
              like: ['1234', '42672'],
              date: ['2021年4月21日 14:26', '2021年6月8日 20:08']
            },
            {
              username: ['小猪皮', '天选之子'],
              comment: ['嘿嘿嘿嘿嘿嘿嘿.', '看剑看剑！'],
              like: ['1234', '42672'],
              date: ['2021年4月21日 14:26', '2021年6月8日 20:08']
            }
          ]
        },
        vedio: {
          urls: ['http://dev.kingyin.club:9000/cloud/IMG_0901.MP4',
            'http://dev.kingyin.club:9000/cloud/1733549208.mp4'
          ],
          comments: [{
              username: ['影片搬运', '猪猪皮恶霸'],
              comment: ['推送最美好的短视频~', '保存了'],
              like: ['1234', '42672'],
              date: ['2021年4月21日 14:26', '2021年6月8日 20:08']
            },
            {
              username: ['小皮猪', '嘿嘿'],
              comment: ['这个好', '嘿嘿嘿嘿嘿嘿嘿.'],
              like: ['1234', '42672'],
              date: ['2021年4月21日 14:26', '2021年6月8日 20:08']
            }
          ]
        }
      };
    },
    //监听属性 类似于data概念
    computed: {

      tableDataNew: function () {
        var arr = this.files.files.filter((data) => {
          var name = data.cnam;

          if (!this.local && this.currentPathIndex == 0) {
            name = this.getName(data.cname);
          }
          if (this.local || this.currentPathIndex > 0) {
            name = data.type == 'FOLDER' || data.type == 'UPLOAD' ? data.cname : data.cname + '.' + data.suffix
          }
          if (name == undefined) return this.state == '' ? true : false;
          return name.toLowerCase().indexOf(this.state.toLowerCase()) != -1
        })
        return arr;
      }

    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      sendUrl(file){
         // 分发事件
        const pram = {
          name: 'file',
          data: file
        }
        bus.$emit('write', pram);
      },
      getImg(data) {
        switch (data.type) {
          case 'UPLOAD':
            return window.g.downloadUrl+'2022227/系统文件/云上传_1647254166224.png';
          case 'PIC':
            return window.g.downloadUrl + data.path;
          case 'VIDEO':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/video_1647253746710.png';
          case 'MUSIC':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/音乐_1647253783935.png';
          case 'FOLDER':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/文件夹_1647253371669.png';
          case 'DOCUMENT':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/document_1647254209751.png';
          case 'DATA':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/文件_1647253919929.png';
          case 'WORD':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/WORD_1647253661415.png';
          case 'EXCL':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/excel-01_1647253590334.png';
          case 'PPT':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/PPT_1647253682209.png';
          case 'PDF':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/pdf_1647254260478.png';
          case 'CODE':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/code_1647254302763.png';
          case 'SQL':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/sql_1647254330477.png';
          case 'ZIP':
            return 'http://dev.kingyin.club:9000/cloud/2022227/系统文件/zip_1647253843939.png';
        }
      },
      colseSearch() {
        this.hasSearch = !this.hasSearch;
        this.state = '';
      },
      searchNext() {
        this.$refs.search.searchNext()
      },
      searchLast() {
        this.$refs.search.searchLast()
      },
      matchCountChange(count) {
        this.matchCount = count
      },
      currentChange(idx) {
        this.currentIdx = idx
      },
      checkKeydown(event) {
        if (event.shiftKey) {
          this.searchLast()
        } else {
          this.searchNext()
        }
      },

      isShare(data) {
        let path = data.path.toString()
        var res = false;

        for (const s of this.shares) {
          if (s.path.substring(7) == this.currentPath) {
            res = true;
          }
        }

        for (const s of this.shares) {
          if (s.path == path) {
            if (s.status == 'NOT_SHARE') {
              return false;
            } else return true;
          }
        }
        return res;
      },
      async getShares() {
        const pram = {
          path: this.currentPath
        }
        var res = await this.$api.file.getShareInfo(pram)
        if (res.code == 20000) {
          this.shares = res.data;
        }
      },
      async share(data) {
        this.fileOp = true;
        // 判断是否已经共享
        const pram = {
          path: data.path,
          status: this.isShare(data) ? 'NOT_SHARE' : 'SHARE'
        }
        await this.$api.file.shareChange(pram);
        this.fileOp = false;
      },
      getName(id) {
        for (const u of this.nicknames) {
          if (u.id == id) {
            return u.nickname + '(' + u.id + ')';
          }
        }
      },
      toWorld() {
        this.local = !this.local;
        this.getNicknames();
        this.toUrl(0);
      },
      docNext(val) {
        this.docIdx += val;
        if (this.docIdx == this.documents.length) {
          this.docIdx = 0;
        } else if (this.docIdx == -1) {
          this.docIdx = this.documents.length - 1;
        }
      },
      getImgList(index) {
        let arr = []
        let i = 0;
        for (i; i < this.pics.length; i++) {
          arr.push(this.pics[i + index].path)
          if (i + index >= this.pics.length - 1) {
            index = 0 - (i + 1);
          }
        }
        return arr;
      },
      async remove(data) {
        this.fileOp = true;
        const pram = {
          bucket: 'cloud',
          path: this.currentPath + (data.type == 'FOLDER' ? data.name + '/' : data.name + '.' + data.suffix)
        }
        await this.$api.file.remove(pram);
        this.reFlash();
      },
      reFlash() {
        this.toUrl(this.currentPathIndex);
        // 文件分类
        this.reModule();
      },
      reModule() {
        this.pics = []
        this.musics = {
          name: [],
          title: [],
          urls: []
        };
        this.documents = [];
        this.vedios = [];
        this.others = [];
        for (const f of this.files.files) {
          f.path = window.g.downloadUrl + f.path;
          switch (f.type) {
            case 'PIC':
              this.pics.push(f);
              break;
            case 'MUSIC':
              let ns = f.cname.split('-');
              this.musics.name.push(ns[ns.length - 1].trim())
              this.musics.title.push(f.cname)
              this.musics.urls.push(f.path)
              break;
            case 'DOCUMENT':
              // case 'PDF':
              this.documents.push(f);
              break;
            case 'VIDEO':
              this.vedios.push(f.path);
              break;
            default:
              this.others.push(f);
          }
        }
        this.current = 4;
      },
      copy() {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          this.$notify({
            title: '复制成功',
            message: '快去写文章粘贴吧~',
            type: 'success',
            position: 'bottom-right'
          });
          // 释放内存  
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制  
          this.$notify({
            title: '警告',
            message: '复制失败，浏览器不支持',
            type: 'warning',
            position: 'bottom-right'
          });
          // 释放内存  
          clipboard.destroy()
        })
      },
      folderFast(o1, o2) {
        if (o1.type == 'FOLDER') {
          return -1;
        }
        return 1;
      },
      async addFile() {
        if (this.$commons.isEmptyString(this.newFileName)) {
          Notiflix.Notify.Warning('文件名不能为空');
          return;
        }
        this.fileOp = true;
        const pram = {
          path: this.currentPath + this.newFileName + '/',
          bucket: 'cloud',
          newFolder: true
        }
        await this.$api.file.mkdir(pram);
        this.reFlash();
        this.dialogVisible = false;
      },
      suffix(data) {
        switch (data) {
          case 'UPLOAD':
            return 'fa fa-upload text-info';
          case 'PIC':
            return 'fa fa-file-picture-o text-warning';
          case 'VIDEO':
            return 'fa fa-video-camera text-success';
          case 'MUSIC':
            return 'fa fa-music text-info';
          case 'FOLDER':
            return 'fa fa-folder-open text-warning';
          case 'DOCUMENT':
            return 'fa fa-folder text-muted';
          case 'DATA':
            return 'fa fa-folder text-primary';
          case 'WORD':
            return 'fa fa-file-word-o text-info';
          case 'EXCL':
            return 'fa fa-file-excel-o text-success';
          case 'PPT':
            return 'fa fa-file-powerpoint-o text-warning';
          case 'PDF':
            return 'fa fa-file-pdf-o text-danger';
          case 'CODE':
            return 'fa fa-code text-primary';
          case 'SQL':
            return 'fa fa-database text-dark';
          case 'ZIP':
            return 'fa fa-file-zip-o text-secondary';
        }
      },
      previewFile(data) {
        if (data.type == 'UPLOAD') {
          return;
        }
        this.currentFile = window.g.downloadUrl + data.path;
        this.currentType = data.type;
        this.currentName = data.cname + '.' + data.suffix;
        this.currentPath = data.path;
        this.preview = true;
      },
      into(data) {
        if (data.type != 'FOLDER') {
          this.previewFile(data);
          return;
        }
        this.path.push(data.name);
        this.toUrl(this.currentPathIndex + 1);
      },
      async toUrl(index) {
        this.fileOp = true;
        this.currentPathIndex = index;
        let path = '';
        for (var i = 0; i <= index; i++) {
          path = path + this.path[i];
          if (i != 0) {
            path = path + '/';
          }
        }
        this.currentPath = path;
        for (var i = this.path.length - 1; i > index; i--) {
          this.path.pop();
        }
        if (this.local) {
          this.getShares();
        }
        const pram = {
          path: path,
          bucket: this.local ? "cloud" : this.currentPathIndex == 0 ? "root" : "world",
          id: this.currentPath == '/' ? -1 : Number(this.currentPath.split('/')[1])
        }
        var res = await this.$api.file.list(pram);
        this.files = res.data;
        this.fileNameFormat();
        this.fileOp = false;
      },
      fileNameFormat() {
        for (var i in this.files.files) {
          this.files.files[i].cname = this.files.files[i].name.replace(/_\d{13}$/, '')
        }
      },
      detail() {
        this.preview = true;
      },
      async getNicknames() {
        var res = await this.$api.file.getNickname();
        if (res.code == 20000) {
          this.nicknames = res.data;
        }
      },
      select(num) {
        if (num != 4) {
          this.reFlash();
        }
        this.current = num;
        this.pathName = this.fileName[num];
      },
      //上传失败
      uploadFileError(err, file, fileList) {
        this.$refs.upup.clearFiles();
        // this.$message.error("上传失败！")
      },
      //上传成功
      uploadFileSuccess(response, file, fileList) {
        this.$refs.upup.clearFiles();
        // if(response.data.error==0){
        //   file.response=response.data.data;
        //   this.fileList.push(file)
        // }else{
        //   this.$message.error(response.data.message);//文件上传错误提示
        // }
      },
      masterFileMax(files, fileList) {
        this.$message.warning(`请最多上传 20 个文件。`);
      },
      onBeforeUpload(file) {
        const isLt20M = file.size / 1024 / 1024 < 20;
        if (!isLt20M) {
          Notiflix.Report.Warning('警告', '单个上传文件大小不能超过 20MB!', '好的');
        }
        return isLt20M;
      },
      changeData(file, fileList) {
        // 数据小于0.1M的时候按KB显示
        const size = file.size / 1024 / 1024 > 0.1 ? `(${(file.size/1024/1024).toFixed()}M)` :
          `(${(file.size/1024).toFixed(1)}KB)`
        file.name.indexOf('M') > -1 || file.name.indexOf('KB') > -1 ? file.name : file.name += size
      },
      sizeFormat(size) {
        return size / 1024 / 1024 > 0.1 ? `${(size/1024/1024).toFixed(2)} MB` :
          `${(size/1024).toFixed(1)} KB`
      },
      handleRequest(uploader) {
        let formdata = new FormData()
        formdata.append('file', uploader.file)
        formdata.append('path', this.currentPath)
        let name = uploader.file.name
        const cur = {
          name: name,
          cname: name,
          type: 'UPLOAD',
          p: 0,
          status: null,
          path: name,
          size: this.sizeFormat(uploader.file.size),
          lastModify: this.$commons.getCurrentDate(2)
        }
        // 添加文件
        this.files.files.unshift(cur);
        // 设置上传进度

        this.$axios.post(window.g.baseUrl+'/file/bucket/upload', formdata, {
          headers: this.headers,
          onUploadProgress: progressEvent => {
            // progressEvent.loaded:已上传文件大小
            // progressEvent.total:被上传文件的总大小
            let num = (progressEvent.loaded / progressEvent.total * 100) | 0
            // let num = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
            this.progressPercent = num;
            // 更新文件进度
            for (const i in this.files.files) {
              if (this.files.files[i].name == name) {
                this.files.files[i].p = num;
              }
            }
            uploader.onProgress({
              percent: num
            })
          }
        }).then(res => {
          let name = res.data.message.split(' ')[0]
          if (res.data.code == 6000) {
            for (const i in this.files.files) {
              if (name == this.files.files[i].name) {
                this.files.files[i].status = 'success';
                break;
              }
            }
            Notiflix.Notify.Info(res.data.message);
            uploader.onSuccess(res);
          } else {
            for (const i in this.files.files) {
              if (name == this.files.files[i].name) {
                this.files.files[i].status = 'exception';
                break;
              }
            }
            Notiflix.Report.Failure('上传失败', res.data.message, '好的');
          }

        }).catch((err) => {
          uploader.onError(err)
          Notiflix.Report.Failure('上传失败', '隔一段时间重试，或者刷新后试试', '好的');
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.reFlash();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    margin-bottom: -20px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #e5e9ee !important;
  }

  .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
  }

  .el-table th.gutter {
    background-color: #f7f8f9;
  }

  .el-table__header-wrapper {
    height: 45px;
  }

</style>
